/* 初始主题颜色
------------------------------- */
:root {
  // 主色调（一级菜单背景色，登录界面背景色）
  --color-menuBg: #303a4b;
  // 一级菜单悬停时高亮色
  --color-menuHover: #263445;
  // 二级菜单背景色
  --color-subMenuBg: #1f2d3d;
  // 二级菜单悬停时高亮色
  --color-subMenuHover: #001528;
  // 菜单文字颜色
  --color-menuText: #bfcbd9;
  // 菜单激活时文字颜色
  --color-menuActiveText: #508aff;
  // 菜单激活时父级文字颜色
  --color-subMenuActiveText: #f4f4f5;
  // 激活标志颜色
  --color-activeColor: #508aff;
  // 菜单侧边框
  --menu-border-width: 0px;
}

// loginPage
.login-container {
  background-color: var(--color-menuBg) !important;

  .login-form {
    color: var(--color-subMenuActiveText) !important;
  }

  .el-input {
    input {
      color: var(--color-subMenuActiveText) !important;
      caret-color: var(--color-subMenuActiveText) !important;
    }
  }
}

// siderbar && navbar
.sidebar-container,
.navbar-container {
  background-color: var(--color-menuBg) !important;

  & .nest-menu .el-sub-menu > .el-sub-menu__title,
  & .el-sub-menu .el-menu-item {
    color: var(--color-menuText) !important;
    background-color: var(--color-subMenuBg) !important;
    border-left: 0 solid var(--color-activeColor) !important;

    &:hover {
      background-color: var(--color-subMenuHover) !important;
    }
  }
  & .el-sub-menu .el-menu-item.is-active {
    border-left: 5px solid var(--color-activeColor) !important;
  }

  .submenu-title-noDropdown,
  .el-sub-menu__title,
  .el-menu-item {
    color: var(--color-menuText) !important;
    background-color: var(--color-menuBg) !important;
    &:hover {
      background-color: var(--color-menuHover) !important;
    }
  }

  .is-active > .el-sub-menu__title {
    color: var(--color-subMenuActiveText) !important;
  }

  .el-menu-item.is-active {
    color: var(--color-menuActiveText) !important;
  }

  .el-icon-arrow-down::before {
    color: var(--color-menuText) !important;
  }
}

.sidebar-container {
  border-right: var(--menu-border-width) solid #d8dce5 !important;

  .sidebar-logo-container {
    background-color: var(--color-menuBg) !important;
    .sidebar-title {
      color: var(--color-menuText) !important;
    }
  }
}

.navbar-container {
  border-bottom: var(--menu-border-width) solid #d8dce5 !important;
}

body > .el-popper {
  .el-menu {
    background-color: var(--color-subMenuBg) !important;
  }

  .el-sub-menu__title,
  .el-menu-item {
    color: var(--color-menuText) !important;
    background-color: var(--color-subMenuBg) !important;
    &:hover {
      background-color: var(--color-subMenuHover) !important;
    }
  }

  .is-active > .el-sub-menu__title {
    color: var(--color-subMenuActiveText) !important;
  }

  .el-menu-item.is-active {
    color: var(--color-menuActiveText) !important;
  }
}

// tagsView
.tags-view-container {
  .tags-view-item {
    &::after {
      background-color: var(--color-activeColor) !important;
    }
  }
}

// popMenu
> .el-menu--vertical,
> .el-menu--horizontal {
  .el-menu {
    background-color: var(--color-subMenuBg) !important;
  }

  .nest-menu .el-sub-menu > .el-sub-menu__title,
  .el-menu-item {
    color: var(--color-menuText) !important;
    background-color: var(--color-subMenuBg) !important;

    &:hover {
      background-color: var(--color-subMenuHover) !important;
    }
  }

  .is-active.el-menu-item {
    color: var(--color-menuActiveText) !important;
  }
}
